import React from 'react'
import { getCommonBounds } from '../element/bounds'
import { NonDeletedExcalidrawElement } from '../element/types'
import { t } from '/imports/i18n'
import { getTargetElements } from '../scene'
import { AppState, ExcalidrawProps } from '../types'
import { CloseIcon } from '/imports/components/icons'
import { Island } from '/imports/components/Island'
import './Stats.style.scss'

export const Stats = (props: {
  appState: AppState
  setAppState: React.Component<any, AppState>['setState']
  elements: readonly NonDeletedExcalidrawElement[]
  onClose: () => void
  renderCustomStats: ExcalidrawProps['renderCustomStats']
}) => {
  const boundingBox = getCommonBounds(props.elements)
  const selectedElements = getTargetElements(props.elements, props.appState)
  const selectedBoundingBox = getCommonBounds(selectedElements)

  return (
    <div className='Stats'>
      <Island padding={2}>
        <div className='close' onClick={props.onClose}>
          {CloseIcon}
        </div>
        <h3>{t('stats.title')}</h3>
        <table>
          <tbody>
            <tr>
              <th colSpan={2}>{t('stats.scene')}</th>
            </tr>
            <tr>
              <td>{t('stats.elements')}</td>
              <td>{props.elements.length}</td>
            </tr>
            <tr>
              <td>{t('stats.width')}</td>
              <td>{Math.round(boundingBox[2]) - Math.round(boundingBox[0])}</td>
            </tr>
            <tr>
              <td>{t('stats.height')}</td>
              <td>{Math.round(boundingBox[3]) - Math.round(boundingBox[1])}</td>
            </tr>

            {selectedElements.length === 1 && (
              <tr>
                <th colSpan={2}>{t('stats.element')}</th>
              </tr>
            )}

            {selectedElements.length > 1 && (
              <>
                <tr>
                  <th colSpan={2}>{t('stats.selected')}</th>
                </tr>
                <tr>
                  <td>{t('stats.elements')}</td>
                  <td>{selectedElements.length}</td>
                </tr>
              </>
            )}
            {selectedElements.length > 0 && (
              <>
                <tr>
                  <td>{t('stats.type')}</td>
                  <td>{t(`toolBar.${selectedElements[0].type}`)}</td>
                </tr>
                <tr>
                  <td>{'x'}</td>
                  <td>{Math.round(selectedBoundingBox[0])}</td>
                </tr>
                <tr>
                  <td>{'y'}</td>
                  <td>{Math.round(selectedBoundingBox[1])}</td>
                </tr>
                <tr>
                  <td>{t('stats.width')}</td>
                  <td>{Math.round(selectedBoundingBox[2] - selectedBoundingBox[0])}</td>
                </tr>
                <tr>
                  <td>{t('stats.height')}</td>
                  <td>{Math.round(selectedBoundingBox[3] - selectedBoundingBox[1])}</td>
                </tr>
              </>
            )}
            {selectedElements.length === 1 && (
              <tr>
                <td>{t('stats.angle')}</td>
                <td>{`${Math.round((selectedElements[0].angle * 180) / Math.PI)}°`}</td>
              </tr>
            )}
            {props.renderCustomStats?.(props.elements, props.appState)}
          </tbody>
        </table>
      </Island>
    </div>
  )
}
